<template>
    <div>
<!--        {{ subject_id }}{{ subject_name }}-&#45;&#45;{{ activeCourse }}-->
        <div
                v-if="
        videoCollectList &&
        videoCollectList.rows &&
        videoCollectList.rows.length
      "
        >
            <div
                    style="display: flex; padding: 10px 0px"
                    v-for="item in videoCollectList.rows"
            >
                <img width="160" :src="item.courseVideo.coverURL" alt="" />
                <div
                        style="
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-left: 20px;
            border-bottom: 1px solid gray;
          "
                >
                    <p class="course_title">{{ item.courseVideo.name }}</p>
                    <p class="course_time">
            <span
                    style="margin-right: 20px"
                    v-if="item.courseVideo.userVideoTimer"
            >已学{{
                proxy.$filters.timeFormat(
                        Number.parseInt(item.courseVideo.userVideoTimer.totalSecond ? item.courseVideo.userVideoTimer.totalSecond:0)
                        )
              }}</span
            >
                        <span
                        >总时长{{
                proxy.$filters.timeFormat(item.courseVideo.duration)
              }}</span
                        >
                    </p>
                    <p class="course_ing">
                        最后观看时间：{{ proxy.$filters.dateTimeFormat2(item.lastTime) }}
                    </p>
                </div>
                <div
                        style="
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            border-bottom: 1px solid gray;
          "
                >
                    <el-button
                            style="margin-bottom: 20px"
                            @click="continueStudy(item.courseVideo)"
                    >继续学习</el-button
                    >
                </div>
            </div>
        </div>
        <el-empty v-else description="暂无数据" />
        <div v-if="videoCollectList.pagination" style="margin-top: 20px">
            <el-pagination
                    background
                    v-model:currentPage="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="videoCollectList.pagination.count"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    import { reactive, toRefs, getCurrentInstance, watch } from "vue";
    import { collect } from "../../../api/api";
    import { useRouter } from "vue-router";

    export default {
        name: "index",
        props: {
            subject_id: {
                type: Number,
            },
            subject_name: {
                type: String,
            },
            activeCourse: {
                type: String,
            },
        },
        setup(props) {
            let data = reactive({
                videoCollectList: [],
                pageSize: 5,
                currentPage: 1,
            });
            let router = useRouter();
            const { proxy } = getCurrentInstance();
            let getCollect = () => {
                collect({
                    type: "1",
                    page: data.currentPage,
                    pageSize: data.pageSize,
                }).then((res) => {
                    console.log("视频收藏", res);
                    data.videoCollectList = res.data;
                });
            };
            getCollect();

            let continueStudy = (item) => {
                console.log(item);
                router.push({
                    name: "VideoPlayer",
                    params: {
                        subject_id: localStorage.getItem("activeCourse"),
                        subject_name: localStorage.getItem("activeCourseName"),
                        id: item.id,
                        chapterID: item.subjectID,
                    },
                });
            };

            watch(
                () => props.activeCourse,
                () => {
                    getCollect();
                }
            );

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`);
                data.pageSize = val;
                getCollect();
            };
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`);
                data.currentPage = val;
                getCollect();
            };
            return {
                proxy,
                handleSizeChange,
                handleCurrentChange,
                ...toRefs(data),
                continueStudy,
            };
        },
    };
</script>

<style scoped>
    .course_title {
        font-weight: bold;
        font-size: 16px;
    }
    .course_time {
        padding: 5px 0;
        font-size: 12px;
        color: rgb(141, 130, 130);
    }
    .course_ing {
        font-size: 14px;
        padding: 15px 0;
    }
</style>
